﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>TweenMax demon</title>
<script src="minified/jquery-1.10.1.min.js"></script>
<script src="minified/TweenMax.min.js"></script>
<script src="minified/plugins/TextPlugin.min.js"></script>
<script src="minified/DrawSVGPlugin.min.js"></script>

<!--www.tweenmax.com.cn演示实例-->
<!-- Demo styles -->
<style>
body {
  background-color: black;
  color: #ccc;
  text-align: center;
}

h1 {
  font-family: Arial, sans-serif;
}

#template, #path {
  fill: none;
}
#template {
  stroke-width: 5px;
  stroke: #444;
}
#path {
  stroke: #88CE02;
  stroke-width: 20px;
  visibility: hidden;
}
#code, #value {
  font-size: 40px;
  font-family: monospace;
}
#code {
  color: #777;
  margin: 20px;
  position: relative;
  visibility:hidden;
}
#current {
  display: inline-block;
  color: white;
}
#description {
  max-width: 530px;
  color: #777;
  font-family: Arial, sans-serif;
  font-size: 24px;
  display: inline-block;
  text-align: left;
}
button{
	margin:0 auto;}
</style>
</head>
<body>
<h1>DrawSVGPlugin Values</h1>

<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 width="516.3px" height="190px" viewBox="0 0 516.3 190" style="enable-background:new 0 0 516.3 211.99;"
	 xml:space="preserve">
  <path id="template" d="M9.13,99.99c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"/>
	<path id="path" d="M9.13,99.99c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"/>
</svg>

<div id="code">drawSVG:<div id="current">"100%"</div></div>
<button id="next" class="dark-grey-button club-demo-button" style="display:block; margin-bottom:20px;">Next Example</button>
<div id="description">Use either percentages or absolute lengths. Use a space-delimited value to define a segment like <code>"40%&nbsp;60%"</code>. If you use a single value, <code>0</code> is assumed for the starting value, so <code>"100%"</code> is the same as <code>"0&nbsp;100%"</code> and <code>"true"</code>.</div>


<script>
 var values = "100%;40% 60%;20 350;50% 50%;true;10%".split(";"),
    currentIndex = 0;

//set the initial value
TweenLite.set("#path", {visibility:"visible"});
TweenLite.set("#code", {visibility:"visible"});

function next() {
  
  TweenLite.killTweensOf(next); //in case the user clicks, clear any delayed calls to this method. 
  if (++currentIndex === values.length) {
    currentIndex = 0;
  }
  if (values[currentIndex] === "true") {
    TweenLite.set("#current", {text:(values[currentIndex]), ease:Linear.easeNone});
  } else {
  	TweenLite.set("#current", {text:('"' + values[currentIndex] + '"'), ease:Linear.easeNone});
  }
  
  TweenLite.to("#path", 1, {drawSVG:values[currentIndex], ease:Power1.easeInOut});
  
}


$("#next").click(next);
        </script>
</body>
</html>